import { Input } from "antd";
import { useState } from "react";
import { useAddKanban } from "utils/kanban";
import { Container } from "./kanban-column";
import { useKanbansQueryKey, useProjectIdInUrl, useProjectInUrl } from "./util";

export const CreateKanban = () => {
    const [name, setName] = useState('');

    const { mutateAsync } = useAddKanban(useKanbansQueryKey());
    const projectId = useProjectIdInUrl();
    const addKanban = async () => {
        await mutateAsync({ name, projectId })
        setName('')
    }
    return (
        <Container>
            <Input
                placeholder={'新建看板'}
                size={"large"}
                onPressEnter={addKanban}
                value={name}
                onChange={(evt) => setName(evt.target.value)}
            />
        </Container>
    )
}